<div>
    <x-header>
        <div class="flex gap-2 text-center text-lg font-semibold">
            <a wire:navigate href="{{ request()->fullUrlWithQuery(['type' => 'actor']) }}" @class(['p-2 flex-1', 'text-red-500 border-b-2 border-red-500' => $type === 'actor'])>演员</a>
            <a wire:navigate href="{{ request()->fullUrlWithQuery(['type' => 'video']) }}" @class(['p-2 flex-1', 'text-red-500 border-b-2 border-red-500' => $type === 'video'])>视频</a>
        </div>
    </x-header>

    @if($collection->isEmpty())
        @include('partials.oops')
    @else

        @if($type === 'video')
            <div class="grid grid-cols-2 gap-2 px-2 text-sm py-4">
                @foreach($collection as $val)
                    <x-video-item :video="$val->favorite" :key="$val->id"/>
                @endforeach
            </div>
        @else
            <div class="grid grid-cols-4 gap-2 px-2 text-sm py-4">
                @foreach($collection as $val)
                    <x-actor-item :actor="$val->favorite" :key="$val->id"/>
                @endforeach
            </div>
        @endif

        @includeWhen($hasMorePages, 'partials.load-more')
    @endif
</div>
